/**
 * @Name:
 * @Author: Hexagon
 * @Desc:  canvas 画正六边形
 * @Date: 2020-12-04 13:58:27
 */
import React, { Component } from "react";
import $ from "jquery";
import { sixCanvasSmall, sixCanvasBig } from "./canvas";

import "./styles.less";

class Hexagon extends Component {
  componentDidMount() {
    window.addEventListener("resize", canvasWidthChange);

    //六边形
    var idsList = ["canvasOne", "canvasTwo", "canvasThree", "canvasFour", "canvasFive"];
    var idsListImage = [
      require("./imgs/hexagon_resource.png"),
      require("./imgs/hexagon_weixin.png"),
      require("./imgs/hexagon_copy.png"),
      require("./imgs/hexagon_ai.png"),
      require("./imgs/hexagon_app.png")
    ];
    var idsListTitle = ["资源", "公众号", "应用", "作业", "应用"];
    var idsLists = ["canvasOne_01", "canvasTwo_02", "canvasThree_03", "canvasFour_04", "canvasFive_05"];
    var idsListsTitle = [
      "啊是大家看法和喀什地方哈桑爱神的箭发货啦可是到了JFK啊十大科技发哈睡觉了客户啊师大附近库哈斯离开家",
      "啊是大家看法和喀什地方哈桑爱神的箭发货啦可是到了JFK啊十大科技发哈睡觉了客户啊师大附近库哈斯离开家",
      "啊是大家看法和喀什地方哈桑爱神的箭发货啦可是到了JFK啊十大科技发哈睡觉了客户啊师大附近库哈斯离开家",
      "啊是大家看法和喀什地方哈桑爱神的箭发货啦可是到了JFK啊十大科技发哈睡觉了客户啊师大附近库哈斯离开家",
      "啊是大家看法和喀什地方哈桑爱神的箭发货啦可是到了JFK啊十大科技发哈睡觉了客户啊师大附近库哈斯离开家"
    ];
    for (let i = 0; i < idsList.length; i++) {
      $("#canvasBody").append(
        `<div class="canvasfirst canvas${i + 1}" id='first${i}'>
          <canvas class="canvas" id=${idsList[i]}></canvas>
          <div class="canvas_one_body"  id=${idsList[i] + "one"}>
          <div class="canvas_one_img"><img style="width:100%;height:100%" src="${idsListImage[i]}"/></div> 
            <span class="canvas_one_title titleColor${i}">${idsListTitle[i]}</span>
          </div>  
          <div class="canvasBig canvas${`0` + (i + 1)}">
            <canvas id=${idsLists[i]} style="position:absolute;"></canvas>
            <div class="canvas_two_body">
              <div class="canvas_two_title">${idsListTitle[i]}</div>
              <span class="canvas_two_text">${idsListsTitle[i]}</span>
            </div>
          </div>
        </div>
        `
      );
      sixCanvasSmall({ id: idsList[i], index: i, size: 310, length: 100 });
      sixCanvasBig({ id: idsLists[i], index: i, size: 370, length: 120 });
    }
    function canvasWidthChange() {
      for (let i = 0; i < idsList.length; i++) {
        const canvasWidth = $(`#${idsList[i]}`).width(); //单个canvas宽
        let canvasBodyWidth = $("#canvasBody").width(); //包含所有canvas的容器宽
        let canvasBodyHeight = $("#canvasBody").height(); //包含所有canvas的容器高
        let firstCanvasLeft = canvasBodyWidth * 0.22; //第一个canvas距左侧宽度
        let firstCanvasHeight = canvasBodyHeight * 0.23; //偶数列canvas距顶部高度
        $(`#${idsList[i]}`).height(canvasWidth); //鼠标移入显示的canvas
        $(`#${idsLists[i]}`).height(canvasWidth * 1.5);

        if (i < idsList.length && i !== 0) {
          let widths = canvasWidth * 0.5 * i + firstCanvasLeft;
          $(`#first${i}`).css("left", widths);
          if (i % 2 !== 0) {
            const canvasDivHeight = $(`#first1`).height(); //包含单个canvas的容器高
            let heights = canvasDivHeight * 0.5 + firstCanvasHeight;
            $(`#first${i}`).css("top", heights);
          }
        }
      }
    }
    canvasWidthChange();
    var canvasDivList = $(".canvas_one_body");
    var canvasBigDivList = document.getElementsByClassName("canvasBig");

    // console.log("canvasDivList===", canvasDivList, canvasBigDivList);
    for (let i = 0; i < canvasDivList.length; i++) {
      $(".canvas_one_body")[i].onmousemove = function () {
        mountedEnter(i);
        if (i <= 1) {
          canvasBigDivList[i].style.left = "-100%";
        }
      };
      $(".canvas_one_body")[i].onmouseout = function () {
        mountedLeve(i);
      };
    }
    function mountedEnter(index) {
      canvasBigDivList[index].style.display = "block";
      // canvasDivList[index].css();

      if (index === 1 || index === 0) {
        $(`#${idsList[index] + "one"}`).css("z-index", "11");
      }
    }
    function mountedLeve(index) {
      canvasBigDivList[index].style.display = "none";
      $(`#${idsList[index] + "one"}`).css("z-index", "3");
    }
  }
 

  render() {
    return (
      <div>
        <h2>正六边形</h2>
        <div className="twoBlockIn">
          <div id="canvasBody" className="canvasBody"></div>
        </div>
      </div>
    );
  }
}

export default Hexagon;
